$(function () {
    /*
    $("#jqGrid2").jqGrid({
        url: baseURL + 'water/water/taccountmanage/statussub',
        datatype: "json",
        colModel: [
            { label: '小区类型', name: 'proType', index: 'proType', width: 50,align:'center' },
            { label: '区域', name: 'areaName', index: 'areaName', width: 80,align:'center'  },
            { label: '分所', name: 'unitName', index: 'unitName', width: 80 ,align:'center' },
            { label: '小区', name: 'proName', index: 'proName', width: 80 ,align:'center' },
            { label: '竣工日期', name: 'useDate', index: 'useDate', width: 80 ,align:'center' },
            { label: '水表总数', name: 'scount', index: 'scount', width: 80,align:'center'  },
            { label: '质保内数', name: 'oknum', index: 'oknum', width: 80 ,align:'center' },
            { label: '超期总数', name: 'over3', index: 'over3', width: 80 ,align:'center' },
            { label: '超期三年', name: '', index: '', width: 80,align:'center',
                formatter: function(value, options, row){
                    return row.over3-row.over6;
                }
            },
            { label: '超期六年', name: 'over6', index: 'over6', width: 80,align:'center'  }
        ],
        viewrecords: true,
        height: 200,
        rowNum: 3000,
        rownumbers: true,
        rownumWidth: 35,
        autowidth:true,
        jsonReader : {
            root: "page",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page",
            rows:"limit",
            order: "order"
        },
        gridComplete:function(){
            //隐藏grid底部滚动条
            $("#jqGrid2").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
            $("thead th").css({"text-align":"center","font-weight":"bold","background-color":"#222d32","color":"#FFF"});

            $("#jqGrid2").jqGrid('setCaption', '综合统计情况');
        },
    });
    */

    $("#jqGrid3").jqGrid({
        url: baseURL + 'water/watersub/vaccountmanagesub/alertlist',
        datatype: "json",
        colModel: [
            { label: '小区名称', name: 'data2',  width: '25%',align:'center' },
            { label: '报警数量', name: 'data3',  width: '25%',align:'center' },
            { label: '报警时间', name: 'data4', width: '25%',align:'center' },
            { label: '查看明细', name: '', index: '', width: '25%',align:'center',
                formatter: function(value, options, row){
                    return '<span class="label label-danger" onclick="vm.openInfoLayer(\''+row.data1+'\')">详细情况</span>';
                }},
        ],
        viewrecords: true,
        height: 200,
        rowNum: 30,
        rowList : [5,10,30,50,100],
        rownumbers: true,
        rownumWidth: 65,
        autowidth:true,
        pager: "#jqGrid3Pager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page",
            rows:"limit",
            order: "order"
        },
        gridComplete:function(){
            //隐藏grid底部滚动条
            $("#jqGrid3").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
            $("thead th").css({"text-align":"center","font-weight":"bold","background-color":"#222d32","color":"#FFF"});
            $("#jqGrid3").jqGrid('setCaption', '报警总数：'+$("#jqGrid3").jqGrid('getGridParam', 'records'));
        },
    });

    $("#jqGrid1").jqGrid({
        url: baseURL +'water/watersub/vaccountmanagesub/list',
        datatype: "json",
        colModel: [
            { label: '小区', name: 'proName', index: 'pro_name', width: 120, key: true,align:'center' },
            { label: '设备数', name: 'deviceCount', index: 'device_count', width: 80,align:'center' },
            { label: '保洁表数', name: 'cleanCount', index: 'clean_count', width: 80,hidden:true ,align:'center'},
            { label: '网点表数', name: 'salesCount', index: 'sales_count', width: 80,hidden:true,align:'center' },
            { label: '小区说明', name: 'proDesc', index: 'pro_desc', width: 80,align:'center' },
            { label: '是否竣工', name: 'installerPhone', index: 'installer_phone', width: 80,align:'center',
                formatter: function(value, options, row){
                    return value === '已竣工' ?
                        '<span class="label label-success">已竣工</span>' :
                        '<span class="label label-danger">未知</span>';
                } },
            { label: '调试人', name: 'debugerName', index: 'debuger_name', width: 80 ,align:'center'},
            { label: '竣工时间', name: 'installerName', index: 'installer_name', width: 80 ,align:'center'},
            { label: '分所', name: 'unitNameG', index: 'unit_name_g', width: 120,hidden:true },
            { label: 'mapX', name: 'mapX', index: 'map_x', width: 80,hidden:true },
            { label: 'mapY', name: 'mapY', index: 'map_y', width: 80,hidden:true },
            { label: '采集方式', name: 'modeName', index: 'mode_name', width: 80 ,align:'center'},
            { label: '电话', name: 'phone', index: 'phone', width: 150,hidden:true },
            { label: '备注', name: 'memo', index: 'memo', width: 80,hidden:true },
            { label: 'beforedata', name: 'beforedata', index: 'beforedata', width: 80,hidden:true },
            { label: 'afterdata', name: 'afterdata', index: 'afterdata', width: 80,hidden:true },
            { label: 'beforetotaldata', name: 'beforetotaldata', index: 'beforetotaldata', width: 80,hidden:true },
            { label: 'aftertotaldata', name: 'aftertotaldata', index: 'aftertotaldata', width: 80,hidden:true },
            { label: 'faultcount', name: 'faultcount', index: 'faultcount', width: 80,hidden:true },
            { label: 'areaId', name: 'areaId', index: 'area_id', width: 80,hidden:true  },
            { label: 'unitNameWId', name: 'unitNameWId', index: 'unit_name_w_id', width: 80,hidden:true  },
            { label: 'cityId', name: 'cityId', index: 'city_id', width: 80,hidden:true  },
            { label: 'unitNameGId', name: 'unitNameGId', index: 'unit_name_g_id', width: 80,hidden:true  },
            { label: 'modeId', name: 'modeId', index: 'mode_id', width: 80,hidden:true  },
            { label: '管理所', name: 'unitNameW', index: 'unit_name_w', width: 80,hidden:true },
            { label: '分公司', name: 'areaName', index: 'area_name', width: 120,hidden:true },
            { label: '城市', name: 'cityName', index: 'city_name', width: 80 ,hidden:true},
            { label: 'abnormal', name: 'abnormal', index: 'abnormal', width: 80,hidden:true }
        ],
        viewrecords: true,
        height: 200,
        rowNum: 3000,
        rownumbers: true,
        rownumWidth: 65,
        autowidth:true,
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page",
            rows:"limit",
            order: "order"
        },
        gridComplete:function(){
            //隐藏grid底部滚动条
            $("#jqGrid1").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
            $("thead th").css({"text-align":"center","font-weight":"bold","background-color":"#222d32","color":"#FFF"});

            $("#jqGrid1").jqGrid('setCaption', '安装服务小区总数：'+$("#jqGrid1").jqGrid('getGridParam', 'records'));

        },
    });

    $("#jqErrDetail").jqGrid({
        url: baseURL + 'water/watersub/vdataerrsub/list',
        postData:{'dept':'-1'},
        datatype: "json",
        colModel: [
            { label: '设备编码', name: 'deviceId', index: 'device_id', width: 180, key: true,hidden:true  },
            { label: '数据日期', name: 'nowDate', index: 'now_date', width: 250 },
            { label: '客户号', name: 'clientId', index: 'client_id', width: 120 },
            { label: '客户名', name: 'clientName', index: 'client_name', width: 120 },
            { label: '设备地址', name: 'deviceAddress', index: 'device_address', width: 220 },
            { label: 'nowData', name: 'nowData', index: 'now_data', width: 80,hidden:true },
            { label: '状态', name: 'deviceStatus', index: 'device_status', width: 150,hidden:false },
            { label: '客户地址', name: 'clientAddress', index: 'client_address', width: 200 },
            { label: 'statusCode', name: 'statusCode', index: 'status_code', width: 80,hidden:true },
            { label: 'agoData', name: 'agoData', index: 'ago_data', width: 80,hidden:true },
            { label: 'agoDeviceStatus', name: 'agoDeviceStatus', index: 'ago_device_status', width: 80,hidden:true },
            { label: '小区', name: 'proName', index: 'pro_name', width: 180,hidden:false },
            { label: '设备数量', name: 'deviceCount', index: 'device_count', width: 80,hidden:false },
            { label: '竣工时间', name: 'installerName', index: 'installer_name', width: 80 },
            { label: '说明', name: 'installerPhone', index: 'installer_phone', width: 80 },
            { label: '调试员', name: 'debugerName', index: 'debuger_name', width: 80 },
            { label: '调试员电话', name: 'debugerPhone', index: 'debuger_phone', width: 80 },
            { label: 'masterNum', name: 'masterNum', index: 'master_num', width: 80,hidden:true },
            { label: 'slaveNum', name: 'slaveNum', index: 'slave_num', width: 80,hidden:true },
            { label: 'cardNum', name: 'cardNum', index: 'card_num', width: 80,hidden:true },
            { label: 'deviceArea', name: 'deviceArea', index: 'device_area', width: 80,hidden:true },
            { label: 'deviceNei', name: 'deviceNei', index: 'device_nei', width: 80,hidden:true },
            { label: 'deviceBuild', name: 'deviceBuild', index: 'device_build', width: 80,hidden:true },
            { label: 'deviceUnit', name: 'deviceUnit', index: 'device_unit', width: 80,hidden:true },
            { label: 'routeNum', name: 'routeNum', index: 'route_num', width: 80,hidden:true },
            { label: 'meterNum', name: 'meterNum', index: 'meter_num', width: 80,hidden:true },
            { label: 'deviceAddressCode', name: 'deviceAddressCode', index: 'device_address_code', width: 80,hidden:true },
            { label: 'clientSex', name: 'clientSex', index: 'client_sex', width: 80,hidden:true },
            { label: 'clientAge', name: 'clientAge', index: 'client_age', width: 80,hidden:true },
            { label: 'clientIdCard', name: 'clientIdCard', index: 'client_id_card', width: 80,hidden:true },
            { label: 'buildNum', name: 'buildNum', index: 'build_num', width: 80,hidden:true },
            { label: 'unitNum', name: 'unitNum', index: 'unit_num', width: 80,hidden:true },
            { label: 'houseNum', name: 'houseNum', index: 'house_num', width: 80,hidden:true },
            { label: 'cityName', name: 'cityName', index: 'city_name', width: 80,hidden:true },
            { label: 'areaName', name: 'areaName', index: 'area_name', width: 80,hidden:true },
            { label: 'cityId', name: 'cityId', index: 'city_id', width: 80,hidden:true },
            { label: 'areaId', name: 'areaId', index: 'area_id', width: 80,hidden:true },
            { label: 'unitIdG', name: 'unitIdG', index: 'unit_id_g', width: 80,hidden:true },
            { label: '管理所', name: 'unitNameG', index: 'unit_name_g', width: 80,hidden:true },
            { label: 'unitIdW', name: 'unitIdW', index: 'unit_id_w', width: 80,hidden:true },
            { label: '分公司', name: 'unitNameW', index: 'unit_name_w', width: 80,hidden:false },
            { label: 'delFlag', name: 'delFlag', index: 'del_flag', width: 80,hidden:true },

            { label: 'typeCode', name: 'typeCode', index: 'type_code', width: 80,hidden:true },
            { label: '类型', name: 'typeName', index: 'type_name', width: 80 },
            { label: '模组', name: 'modeName', index: 'mode_name', width: 80,hidden:true },
            { label: 'abnormal', name: 'abnormal', index: 'abnormal', width: 80,hidden:true },
            { label: 'deptId', name: 'deptId', index: 'dept_id', width: 80,hidden:true }
        ],
        viewrecords: true,
        height: $(window).height()*0.8-220 > 400 ? $(window).height()*0.8-215 : 400,
        rowNum: 16,
        rowList : [16,30,50],
        rownumbers: true,
        rownumWidth: 65,
        autowidth:true,
        //autowidth: false,
        //shrinkToFit: true,
        multiselect: true,
        pager: "#jqErrGridPager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page",
            rows:"limit",
            order: "order"
        },
        gridComplete:function(){
            //隐藏grid底部滚动条
            //$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
        }
    });

    $("#jqGrid2").jqGrid({
        url: baseURL + 'water/watersub/dataerralertfixed/listchart',
        datatype: "json",
        colModel: [
            { label: 'opKey', name: 'opKey', index: 'op_key', width: 50, key: true,hidden:true },
            { label: '加入时间', name: 'opAddDate', index: 'op_add_date', width: 120,align:'center' },
            //{ label: '维修状态', name: 'opFixedFlag', index: 'op_fixed_flag', width: 80 },
            //{ label: '修复时间', name: 'opFixedDate', index: 'op_fixed_date', width: 80 },
            //
            { label: '客户号', name: 'clientId', index: 'client_id', width: 60,align:'center' },
            { label: '客户名', name: 'clientName', index: 'client_name', width: 60,align:'center' },
            { label: '客户地址', name: 'clientAddress', index: 'client_address', width: 230 },
            { label: '小区名称', name: 'proName', index: 'pro_name', width: 60 ,align:'center'},
            { label: '设备编码', name: 'deviceId', index: 'device_id', width: 60 ,align:'center'},
            { label: '采集日期', name: 'nowDate', index: 'now_date', width: 80,align:'center' },
            { label: '采集数据', name: 'nowData', index: 'now_data', width: 60,align:'center' },
            { label: '设备状态', name: 'deviceStatus', index: 'device_status', width: 60 ,align:'center'},
            //{ label: '之前数据', name: 'agoData', index: 'ago_data', width: 80 },
            //{ label: '之前状态', name: 'agoDeviceStatus', index: 'ago_device_status', width: 80 },

            //{ label: '标识', name: 'delFlag', index: 'del_flag', width: 80 },
            //{ label: '备注1', name: 'memo1', index: 'memo1', width: 80 },
            //{ label: '备注2', name: 'memo2', index: 'memo2', width: 80 },
            //{ label: '备注3', name: 'memo3', index: 'memo3', width: 80 }
        ],
        viewrecords: true,
        height: 200,
        rowNum: 10,
        rowList : [10,30,50],
        rownumbers: true,
        rownumWidth: 65,
        autowidth:true,
        //multiselect: true,
        pager: "#jqGrid2Pager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page",
            rows:"limit",
            order: "order"
        },
        gridComplete:function(){
            //隐藏grid底部滚动条
            $("#jqGrid2").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
            $("#jqGrid2").jqGrid('setCaption', '报警待处理总数：'+$("#jqGrid2").jqGrid('getGridParam', 'records'));
        }
    });

    $(window).on('resize', function () {
        var $content = $('.content');
        $content.height($(this).height() - 40);
        $content.find('iframe').each(function () {
            $(this).height($content.height());
        });
    }).resize();

});

var vm = new Vue({
    el:'#rrapp',
    data:{
        errListData:{},
    },
    methods: {
        draw_chart:function(){
            $.getJSON(baseURL + "water/watersub/vaccountmanagesub/chartsub", function(r){
                //console.log(r);
                let dataChart = r.page[0];
                //this.errListData = r.page;
                /*
                this.errListData = this.errListData.slice(1,this.errListData.length);
                $("#jqGrid3").jqGrid({
                    datatype: "local",
                    data:this.errListData,
                    colModel: [
                        { label: '小区名称', name: 'data2', index: 'data2', width: '25%',align:'center' },
                        { label: '报警数量', name: 'data3', index: 'data3', width: '25%',align:'center' },
                        { label: '报警时间', name: 'data4', index: 'data4', width: '25%',align:'center' },
                        { label: '查看明细', name: '', index: '', width: '25%',align:'center',
                            formatter: function(value, options, row){
                                return '<span class="label label-danger" onclick="vm.openInfoLayer(\''+row.data1+'\')">详细情况</span>';
                            }},
                    ],
                    viewrecords: true,
                    height: 200,
                    rowNum: 3000,
                    rownumbers: true,
                    rownumWidth: 35,
                    autowidth:true,
                    gridComplete:function(){
                        //隐藏grid底部滚动条
                        $("#jqGrid3").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
                        $("thead th").css({"text-align":"center","font-weight":"bold","background-color":"#222d32","color":"#FFF"});
                        $("#jqGrid3").jqGrid('setCaption', '报警总数：'+$("#jqGrid3").jqGrid('getGridParam', 'records'));
                    },
                });
*/
                let myChart = echarts.init(document.getElementById('chart1'));
                var option = {
                    color: [
                        "#0098d9",
                        "#cda819",
                        "#2b821d",
                        "#339ca8",
                        "#005eaa",
                        "#32a487" ,
                        "#e6b600",
                        "#c12e34"
                    ],
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        show: false,
                        top: '5%',
                        left: 'center'
                    },
                    title:{
                        text:dataChart.data6,
                        left:"center",
                        top:"50%",
                        textStyle:{
                            color:"#c12e34",
                            fontSize:14,
                            align:"center"
                        }
                    },
                    graphic:{
                        type:"text",
                        left:"center",
                        top:"40%",
                        style:{
                            text:"安装总数",
                            textAlign:"center",
                            fill:"#333",
                            fontSize:13,
                            fontWeight:700
                        }
                    },
                    series: [
                        {
                            //name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: true,
                                formatter(param) {
                                    // correct the percentage
                                    return param.name +'\n'+param.value+ '(' + param.percent + '%)';
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    //fontSize: 20,
                                    fontWeight: 'bold',
                                }
                            },
                            labelLine: {
                                show: true,
                            },
                            data: [
                                { value: dataChart.data14, name: '湿式水表总数' },
                                { value: dataChart.data15, name: '干式水表总数' },
                            ]
                        }
                    ]
                };
                myChart.setOption(option);

                myChart = echarts.init(document.getElementById('chart2'));
                option = {
                    title: {
                        text: '('+dataChart.data2+')服役在线水表统计图',
                        x: 'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
                        y: 'top', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
                    },
                    label: {//rotate: 'radial',
                        show: true,
                        position: 'inside'
                    },
                    itemStyle: {color: '#61a0a8'},
                    //radius: [0, '95%'],
                    //center: ['50%', '60%'],
                    legend: {padding: [35, 0, 0, 0]},
                    tooltip: {},
                    xAxis: {
                        type: 'category',
                        data: ['总数', '未超期', '超期总数','三年超期', '六年超期']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [dataChart.data6,dataChart.data3,dataChart.data4*1+dataChart.data5*1,dataChart.data4,dataChart.data5],
                            type: 'bar',
                        }
                    ]

                };

                myChart.setOption(option);

                myChart = echarts.init(document.getElementById('chart3'));
                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        show: false,
                        top: '5%',
                        left: 'center'
                    },
                    title:{
                        text:dataChart.data6,
                        left:"center",
                        top:"50%",
                        textStyle:{
                            color:"#0098d9",
                            fontSize:14,
                            align:"center"
                        }
                    },
                    graphic:{
                        type:"text",
                        left:"center",
                        top:"40%",
                        style:{
                            text:"安装总数",
                            textAlign:"center",
                            fill:"#333",
                            fontSize:13,
                            fontWeight:700
                        }
                    },
                    series: [
                        {
                            //name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: true,
                                formatter(param) {
                                    // correct the percentage
                                    return param.name +'\n'+param.value+ '(' + param.percent + '%)';
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    //fontSize: 20,
                                    fontWeight: 'bold',
                                }
                            },
                            labelLine: {
                                show: true,
                            },
                            data: [
                                { value: dataChart.data17, name: '居民用表数' },
                                { value: dataChart.data16, name: '贸易表(网点表)数' },
                            ]
                        }
                    ]
                };
                myChart.setOption(option);

                window.addEventListener("resize", function () {
                    myChart.resize();
                });


            });
        },
        openInfoLayer :function(event){
            //console.log("event");
            $("#jqErrDetail").jqGrid('setGridParam',{
                postData:{'dept':event},
                page:1
            }).trigger("reloadGrid");

            layer.open({
                type: 1,
                //offset: '50px',
                skin: 'layui-layer-molv',
                title: "报警详细情况【"+event+"】",
                area: ['80%', '80%'],
                shade: 0,
                shadeClose: false,
                content: jQuery("#errInfoInfoLayer"),
                btn: ['关闭','加入待更换'],
                btn1: function (index) {
                   layer.close(index);
                },
                btn2:function(index){
                    var grid = $("#jqErrDetail");
                    var rowKey = grid.getGridParam("selrow");
                    if(!rowKey){
                        alert("请选择一条记录");
                        return false;
                    }
                    var deviceIds = grid.getGridParam("selarrrow");
                    var lock = false;

                    var deviceKeys =[];
                    $.each(deviceIds,function(index,item){
                        var rowData = $("#jqErrDetail").jqGrid('getRowData', item);
                        deviceKeys.push(rowData.deviceId+"_"+rowData.nowDate);
                    });
                    //console.log(deviceKeys);

                    layer.confirm('确定将所选报警加入待处理？', {
                        btn: ['确定','取消'] //按钮
                    }, function(){
                        if(!lock) {
                            lock = true;

                            $.ajax({
                                type: "POST",
                                url: baseURL + "water/watersub/dataerr/fixed",
                                contentType: "application/json",
                                data: JSON.stringify(deviceKeys),
                                success: function(r){
                                    if(r.code == 0){
                                        layer.msg("操作成功", {icon: 1});
                                        $("#jqErrDetail").trigger("reloadGrid");
                                        $("#jqGrid3").trigger("reloadGrid");
                                        $("#jqGrid2").trigger("reloadGrid");
                                    }else{
                                        layer.alert(r.msg);
                                    }
                                }
                            });

                            return true;
                        }
                    }, function(){
                    });

                    return false;
                }
            });
        },
    },
    created: function(){
    },
    mounted: function(){
        this.draw_chart();
    }
});